<template>
    <div class="ConstructionInspection">
        <!--<div class="sort">-->
        <!--<ul>-->
          <!--<li v-for="(item, index) in sortList" :key="index" @click="_sortlichange(item, index)">-->
            <!--<span>{{ item.title }}</span>-->
            <!--<img v-if="item.sort === 'asc'" src="./../../../../static/imgs/ZLJ/sort1.png" />-->
            <!--<img v-else src="./../../../../static/imgs/ZLJ/sort2.png" />-->
          <!--</li>-->
        <!--</ul>-->
        <!--<van-popup v-model="showPicker" position="bottom">-->
          <!--<van-picker value-key="cityname" title="选择所属区域" show-toolbar :columns="CountyData" @confirm="onConfirm" @cancel="showPicker = false" />-->
        <!--</van-popup>-->
        <!--&lt;!&ndash;<van-popup v-model="showPicker1" position="bottom">&ndash;&gt;-->
        <!--&lt;!&ndash;<van-picker value-key="name" title="选择数据来源" show-toolbar :columns="sourData" @confirm="onConfirm1" @cancel="showPicker1 = false" />&ndash;&gt;-->
        <!--&lt;!&ndash;</van-popup>&ndash;&gt;-->
      <!--</div>-->
        <div class="top">
            <div class="top-left-search">
              <van-search v-model="HZXM" show-action placeholder="请输入户主姓名" @search="serachData">
                <template #left>
                  <div @click="options.length>0?show2 = true:''" style="margin-right: 5px;font-size: 14px;"><van-icon name="arrow-down" />{{
                    areaValue }}</div>
                </template>
                <template #action>
                  <div style="display: flex;align-items: center;">
                    <van-button @click="changeMap" type="info" size="small"><van-icon name="exchange" />地图</van-button>
                  </div>
                </template>
              </van-search>
              <!--<van-search   show-action background="#eee" v-model="value" placeholder="请输入搜索关键词" @search="serachData" >-->
                <!--<template #action>-->
                  <!--<div @click="onSearch">-->
                    <!--<van-icon name="exchange" size="18" />-->
                    <!--地图-->
                  <!--</div>-->
                <!--</template>-->
              <!--</van-search>-->
            </div>
        </div>
        <div class="middle" id="container" style="overflow: auto;">
            <div class="search-list">
                <van-list v-model="loading" @refresh="onRefresh" :finished="finished" finished-text="没有更多了" @load="onLoad">
                    <div class="search-list-top" v-for="(item, index) in list" :key="index" @click="handleGoto(item)">
                        <div class="top" style="line-height: 36px;">
                            <div style="float: left;"><span style="font-weight: 1000;font-size: 18px;color: #000;">户主姓名：{{ item.HOUSEAPPLICANT || '暂无数据' }}</span></div>
                            <div v-if="nowIndex==1" style="float: right;"><span style="font-weight: 1000;font-size: 18px;">巡查结论：{{ item.XCJL_DICNAME || '暂无数据' }}</span></div>
                        </div>
                        <div class="top">
                            <div
                                style="float: left;width: 50%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;">
                                系统施工进度:<span style="font-weight: 500;">
                              {{item.WF_NAME}}
                              <!--{{ item.XTSGJD =='635'?'现场放样': item.XTSGJD =='636'?'基槽验线': item.XTSGJD =='637'?'一层立模': item.XTSGJD =='638'?'竣工验收':'暂无数据' }}-->
                            </span>
                            </div>
                            <div v-if="nowIndex==1" style="float: right;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 14px;">
                                 巡查施工进度:
                              <span style="font-weight: 500;">{{ item.XCSGJD =='635'?'现场放样': item.XCSGJD =='636'?'基槽验线': item.XCSGJD =='637'?'一层立模': item.XCSGJD =='638'?'竣工验收':'暂无数据' }}</span>
                            </div>
                        </div>
                      <div v-if="nowIndex==1" class="top">
                        <div style="float: left;font-size: 14px;">巡查人:<span style="font-weight: 500;">{{item.XCR ? item.XCR : "暂无数据" }}</span></div>
                        <div style="float: left;font-size: 14px;">巡查时间:<span style="font-weight: 500;">{{item.XCSJ ? item.XCSJ.substring(0,10) : "暂无数据" }}</span></div>
                      </div>
                      <div class="top">
                            <div style="float: left;font-size: 14px;">地址:<span style="font-weight: 500;">{{item.ADDRESS ? item.ADDRESS : "暂无数据" }}</span></div>
                        </div>
                    </div>
                </van-list>
            </div>
        </div>
        <div class="sort bottomfix">
           <ul>
          <li v-for="(item, index) in bottomList" :key="index" :class="{ secelt: nowIndex == index }" @click="bottomListBtn(item, index)">
            <!--<el-badge v-if="nowIndex == index" :value="totalCount" :max="99" class="item">-->
              {{ item }}
            <!--</el-badge>-->
            <!--<span v-else>-->
              <!--{{ item }}-->
            <!--</span>-->
          </li>
        </ul>
        </div>
        <!--<div class="bottom">-->
            <!--<div class="bottom-top"><van-button style="width: 90vw;" type="info"-->
                    <!--@click="handleSelectGJ('GJ')">新增</van-button></div>-->
        <!--</div>-->
        <div class="action">
            <van-popup v-model="show" title="新增" round position="bottom" :safe-area-inset-bottom="true"
                :style="{ height: '70%' }">
                <div class="title">
                    新增
                </div>
                <div class="top-search">
                    <van-search v-model="value" placeholder="请输入搜索关键词" @search="onSearch" />
                </div>
                <!-- <div class="list-view" style="height: 52vh; overflow-y: auto;" @scroll="handleScroll">
                    <div ref="conRef" class="list-view-content">
                        <div class="list-view-item" v-for="(item, index) in formDataGJ" :key="index">
                        <div v-for="(it, index) in tableDataFiled1" :key="index">
                            <van-field v-if="it.label != '发证日期' && it.label != '有效期至'" :required="true"
                                v-model="item[it.key]" :label="it.label" :placeholder="'请填写' + it.label">
                                <template #button v-if="it.label == '姓名'">
                                    <van-button size="small" @click="handleClickADD(item)" type="info">选择</van-button>
                                </template>
                            </van-field>
                            <select-picker v-else :ISrequired="true" :isTime="true" :labels="it.label"
                                :selectValue="item[it.key]" @getMessage="setValue"></select-picker>
                        </div>
                        <div class="line"></div>
                    </div>
                    </div>
                </div> -->
                <viewScroll  ref="viewScroll"/>
                <div style="position: fixed; bottom: 0;" @click="handleAddData">
                    <van-button type="info" style="width: 100vw;">添加</van-button>
                </div>
            </van-popup>
        </div>
      <van-popup v-model="show2" @click-overlay="close" round position="bottom">
        <!--<van-cascader v-model="cityCode" title="请选择" :closeable="false" :options="options" @change="onChange" @finish="onFinish"-->
                      <!--@confirm="closePopup"    />-->
        <!--@finish="onFinish"-->
        <van-cascader v-model="cityCode" title="请选择" :closeable="false" :options="options" @change="onChange"
                    @confirm="close"  />
        <span style="position: absolute; top: 2%; right: 10px;font-size: 16px;" @click="close">确定</span>
      </van-popup>
    </div>
</template>

<script>
import dd from 'gdt-jsapi'
import { Artisans, houseRemoldUnitBuildPersonRel, FileServerProxy, houseRemoldUnitBuildPerson, houseRemoldUnitBuildPersonSave, companyData,getDatalistForTree,GetAdministrative } from '@/utils/api'
import selectPicker from '@/utils/selectPicker'
import viewScroll from './viewScroll.vue'
import axios from 'axios'
export default {
    data() {
        return {
          HZXM:'',
          BaseURL:window.g.BaseURL,
          cityCode:'',
          areaValue:'',
          options:[],
          show2:false,
          CountyData:[],
          startIndex:0,
          showPicker:false,
          sortList: [
            {
              title: '所属区域',
              name: 'RWZT',
              sort: 'asc'
            },
          ],
            totalCount: 0,
            nowIndex:0,
            bottomList: ['待巡查', '已巡查'],
            num: 998,
            activeNames: ['1'],
            showGJ: false,
            color: '#1989fa',
            value: '',
            xuanze: {},
            show: false,
            pageNum: 1,
            pageSize: 20,
            tableData: [
            ],
            formDataGJ: [],
            formData1: {
                value1: -1,
                value2: -1,
                value3: -1,
                value4: -1,
                value5: -1,
            },
            list: [],
            addShen: [],
            tableDataFiled1: [
                {
                    label: '姓名',
                    key: 'HOUSEAPPLICANT'
                },
                {
                    label: '手机号',
                    key: 'APPLYPHONE'
                },
                {
                    label: '所属区域',
                    key: 'SSX'
                },
                {
                    label: '地址',
                    key: 'PERMANENTADDR'
                }
            ],
            loading: false,
            finished: false,
            rowData: {},
            deepListData: [

            ]
        }
    },
    methods: {
      onRefresh() {
        // 清空列表数据
        this.finished = false;
        // 重新加载数据
        // 将 loading 设置为 true，表示处于加载状态
        this.loading = true;
        this.onLoad();
      },
      citycode(str) {
        if (str.endsWith("0000000000")) {
          //省
          return "省";
        } else if (str.endsWith("00000000")) {
          return "市";
        } else if (str.endsWith("000000")) {
          return "县";
        } else if (str.endsWith("000")) {
          return "村镇";
        } else {
          return "社区"
        }
      },
      getCityName: async function (code){
        let result = await axios.post(`${this.BaseURL}api/farmerHouse/cityCode/getAllParentByCityCode?cityCode=${code}`);
        // this.areaValue = result.data.data.cityName
        if (code=="330000000000"){
          this.areaValue = "杭州市"
        }
        if (result.data.data.cityName) {
          this.areaValue = result.data.data.cityName
        }
        if (result.data.data.countyName) {
          this.areaValue = result.data.data.countyName
        }
        if (result.data.data.townName) {
          this.areaValue = result.data.data.townName
        }
        if (result.data.data.villageName) {
          this.areaValue = result.data.data.villageName
        }
        // if (result.data.data.provinceName) {
        //   this.areaValue = result.data.data.provinceName
        // }
      },
      close() {
        this.totalCount = 0
        this.list = []
        this.pageNum = 1
        this.startIndex = 0
        this.show2 = false;

        this.onLoad()
        // this.getcontentData()
      },
      getScrollTop(){
        var container = document.getElementById("container");
        container.scrollTop = 0; //将滚动条设置到容器中100px的位置
        this.onLoad()
      },
      changeMap(){
        this.$router.push({
          path: '/BuildMain',
          query: {
            citycode: window.localStorage.getItem('citycode'),
            cityname: this.areaValue,
          },
        })
      },
      getXZQH: async function (value, selectedOptions, tabIndex) {
        var res = await GetAdministrative(value)
        selectedOptions[tabIndex].children = []
        if (res.data.data.length > 0) {
          res.data.data.forEach((element) => {
            let obj = {
              text: element.cityname,
              value: element.citycode
            }
            if (tabIndex < 1) {
              obj['children'] = []
            }
            selectedOptions[tabIndex].children.push(obj)
          })
        }
      },
      onChange({ value, selectedOptions, tabIndex }) {
        if (selectedOptions[tabIndex].children && selectedOptions[tabIndex].children.length == 0 && tabIndex < 2) {
          this.getXZQH(value, selectedOptions, tabIndex)
        }
        this.onFinish({value, selectedOptions, tabIndex})
      },
      onFinish({value, selectedOptions, tabIndex}) {
        if (selectedOptions[selectedOptions.length-1].text) {
          this.areaValue = selectedOptions[selectedOptions.length-1].text;
        } else {
          this.areaValue = "杭州市";
        }
        // this.areaValue = selectedOptions.at(-1).text;
        this.cityCode = value
        // this.form.cityCode.length == 3 ? (this.IsShowAre = false) : ''
      },
      getXianOpenDataView: async function (data) {
        this.options = [{
          text: window.localStorage.getItem('cityName'),
          value: window.localStorage.getItem('citycode'),
        }]
        const res = await getDatalistForTree(data)
        res.data.data.forEach((item) => {
          this.options.push({
            text: item.cityname,
            value: item.citycode,
            children: []
          })
        })
        // this.options = res.data.data
      },
      onConfirm(val) {
        if (val.cityname == '') {
          this.sortList[0].title = '所属区域'
        } else {
          this.sortList[0].title = val.cityname
          this.cityCode = val.citycode
        }
        this.showPicker = false
        this.startPage = 0
        this.ListDataOption = []
        this.onLoad()
      },
      getCountyData: async function () {
        this.CountyData = []
        let webResult = await axios.get(window.g.BaseURL + 'api/rescatalog/gsaCodeCity/listForTree/' + window.localStorage.getItem('citycode'))
        this.CountyData = webResult.data.data
      },
      //字段排序
      _sortlichange(item, index) {
        const self = this
        if (item.sort == 'asc') {
          item.sort = 'desc'
        } else {
          item.sort = 'asc'
        }
        if (index == 0) {
          this.showPicker = true
          this.showPicker1 = false
        } else {
          this.showPicker1 = true
          this.showPicker = false
        }
      },
      bottomListBtn(item, index) {
        this.finished = true;
        this.pageNum = 1
        this.nowIndex = index
        this.totalCount = 0
        this.list = []
        this.onLoad()
      },
        async onLoad() {
            this.startIndex = (this.pageNum-1)*10
            this.pageNum += 1
            this.getData()
        },
        serachData(val) {
          this.pageNum = 1
          this.list = []
          this.totalCount = 0
          this.startIndex = 0
            this.onLoad()
            // if (!val) return this.list = this.deepListData
            // this.list = this.list.filter(item => {
            //     return item.XCR && item.XCR.indexOf(val) > -1
            // })

        },
        handleGoto(data) {
            this.$router.push({
                path: '/ConstructionInspectionPage',
                query: {
                    data: JSON.stringify(data),
                    cityCode:this.cityCode?this.cityCode:window.localStorage.getItem('citycode'),
                    index:this.nowIndex
                }
            })
        },
        //添加施工人员
        async handleAddData() {
            if(!this.$refs.viewScroll.xuanze.ROW_GUID) {
                this.$toast.fail('先选择一条数据')
                return false
            }
            let strParams = JSON.stringify([{ 'to_row_guid': this.$refs.viewScroll.xuanze.ROW_GUID }])
            let data = {
                "accessCode": "0fb3f6123d1b4fe6851c99532c463f6f",
                "cityCode": window.localStorage.getItem('citycode'),
                "params": {
                    "dataGuid": "88e8c4b2-7f4e-4a12-ae99-26233e202274",
                    "strParams": strParams,
                    "token": window.localStorage.getItem('token')
                }
            }
            const res = await FileServerProxy(data)
            if (JSON.parse(res.data.data).Success) {
                this.$toast.success('保存成功')
                this.list = []
                this.getData()
                this.show = false
            } else {
                this.$toast.fail('保存失败')
            }
        },
        setValue(name, value) {
            if (value == '发证日期') {
                this.formDataGJ.FZRQ = name
            } else {
                this.formDataGJ.YXQ = name
            }
        },
        //获取工匠列表
        async handleSelectGJ(data) {
            if (data == 'GJ') {
                this.show = true;
                // this.getDataAdd()
            }
        },
        //获取当前施工负责人列表
        async getData() {
        // alert(1)
          // this.finished = false
          let code = ""
          if (this.citycode(window.localStorage.getItem('citycode'))=="省"){
            code = this.cityCode
          } else {
            code = window.localStorage.getItem('citycode')
          }
            let VILLAGE = this.cityCode.toString().replace(/\.?0+$/,"")
            let data = {
                "accessCode": "536f9dd4b411475394ac89b4978547c5",
                "cityCode": code,
                "params": {
                    "dataguid": this.nowIndex==0?"4f6fd06d-c9d6-45b9-9852-d6c42bfca7b9":"27265144-8e73-4ccc-8665-b66a476b2d4e",
                    "searchObject": [],
                    "token": window.localStorage.getItem('token'),
                    "startIndex":this.startIndex,
                     "pageSize": 10
                }
            }
            let searchObject = []
            if (VILLAGE) {
            searchObject.push({"field":"CUN","value":VILLAGE,"operator":"like"})
            }
            if (this.HZXM) {
              searchObject.push({"field":"HOUSEAPPLICANT","value":this.HZXM,"operator":"like"})
            }
            data.params.searchObject = JSON.stringify(searchObject)
            const res = await FileServerProxy(data)
            console.log(JSON.parse(res.data.data).Data)
            if (JSON.parse(res.data.data).Data.length>0) {

              // this.totalCount = JSON.parse(res.data.data).Data.length
              this.totalCount += parseInt(JSON.parse(res.data.data).Data.length)
              // console.log(this.totalCount)
              JSON.parse(res.data.data).Data.forEach((item,index)=>{
                this.list.push(item)
              })
              this.loading = false;
              if (JSON.parse(res.data.data).Data.length===0) {
                this.finished = true;
              } else {
                this.finished = false
              }
                // this.loading = false;
              // if (this.list.length==JSON.parse(res.data.data).Data.totalCount) {
              //   this.finished = true;
              // }
              // this.list = JSON.parse(res.data.data).Data;
              // this.deepListData = this.list
              // this.finished = true;
            } else {
              this.loading = false;
              // this.totalCount = 0
              // this.list = []
              this.finished = true;
            }

        },
        //过滤工匠数据
        async onSearch(val) {
            // if (!val) return this.formDataGJ = this.addShen
            // this.formDataGJ = this.formDataGJ.filter(item => {
            //     return item.HOUSEAPPLICANT && item.HOUSEAPPLICANT.indexOf(val) > -1
            // })
            // this.$children.seleData(val)
            this.$refs.viewScroll.seleData(val)
        },
        async saveList(item, type) {
            let data = {
                "accessCode": "688bd3883572440a859dfd8ba9194e7b",
                "cityCode": window.localStorage.getItem('citycode'),
                "params": {
                    "dataguid": "88e8c4b2-7f4e-4a12-ae99-26233e202274",
                    "searchObject": [],
                    "token": window.localStorage.getItem('token')
                }
            }
            const res = await FileServerProxy(data)
            if (res.data.code == 200) {
                this.$toast.success('保存成功')
                type == 0 ? this.showGJ = false : this.show = false
                this.list = []
                this.getData()
            } else {
                this.$toast.fail('请勿重复添加')
            }
        }
    },
    watch: {

    },
    components: {
        selectPicker,
        viewScroll
    },
    mounted() {
      if (window.localStorage.getItem('citycode')=="330000000000") {
        this.cityCode = "441300000000"
      } else {
        this.cityCode = window.localStorage.getItem('citycode')
      }
      this.getCityName(window.localStorage.getItem('citycode'))
      this.getXianOpenDataView(window.localStorage.getItem('citycode') ? window.localStorage.getItem('citycode') : "330000000000")
      dd.ready(function () {
      dd.setTitle({
        title: '施工巡查'
      })
        .then((res) => { })
        .catch((err) => {
          console.error(err)
        })
    })
      // this.getCountyData()
    },
    created() {
      if (window.localStorage.getItem('citycode')=="330000000000") {
        this.cityCode = 441300000000
      }
        //施工巡查
        // dd.ready(function () {
        //     dd.setTitle({
        //         title: '施工巡查'
        //     })
        //         .then(res => {
        //         })
        //         .catch(err => {
        //             console.error(err)
        //         })
        // })
        //获取路由参数
        // this.rowData = JSON.parse(this.$route.query.data)
    }
}
</script>

<style scoped lang="scss">
.ConstructionInspection {
    font-size: 14px;
    height: 100vh;
    background-color: #eee;
    .bottomfix {
    border-radius: 10px;
    // height: 5vh;
    background: #fff;
    color: #000 !important;
    margin: 10px 0px;
    .secelt {
      background: #1989fa;
      color: #ffffff;
      border-radius: 10px;
      // border-top-left-radius: 10px;
      // border-bottom-left-radius: ;
    }
  }
  .sort {
    height: 5vh;
    line-height: 5vh;
    background: #fff;
    ul {
      display: flex;
      li {
        // width: 33.33333333333%;
        width: 100%;
        text-align: center;
        font-size: 1.6vh;
        font-weight: 400;
        color: #6c6c6c;
        cursor: pointer;
        img {
          height: 1.5vh;
        }
      }
    }
  }
    .line {
        width: 100%;
        height: 10px;
        background-color: #f6f6f6;
    }

    .top {
        /*display: flex;*/
        /*justify-self: center;*/
        /*align-items: center;*/
        /*height: 50px;*/
        /*line-height: 30px;*/
      margin-bottom: 10px;
        /*padding-top: 12px;*/

        .top-left-search {
            flex-grow: 2
        }

        .top-right-num {
            flex-grow: 1;
        }
    }

    .top1 {
        display: flex;
        justify-self: center;
        align-items: center;
        height: 20px;
        line-height: 20px;
        padding-top: 12px;
        font-size: 12px;
        color: #CCC;

        .top-left-search {
            flex-grow: 2
        }

        .top-right-num {
            flex-grow: 1;
        }
    }

    .middle {
        padding: 10px;
      background-color: #fff;
        .search-list {
            height: 83vh;
            .search-list-top {
                overflow: auto;
                border-bottom: 1px solid #ebedf0;
                /*border-radius: 8px;*/
                /*padding: 8px;*/
                // box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
                margin-bottom: 8px;
                .top {
                    display: flex;
                    justify-content: space-between;
                    line-height: 24px;
                    color: #aaa;
                }

                .top1 {
                    display: flex;
                    justify-content: space-between;
                    line-height: 24px;
                    color: #aaa;
                }

                .bottom {
                    display: flex;
                    justify-content: space-between;
                    line-height: 24px;
                }
            }
        }
    }

    .bottom {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-top: 12px;
        // padding: 6px;
    }

    .action {
        .title {
            font-size: 16px;
            text-align: center;
            font-weight: 600;
            height: 30px;
            line-height: 30px;
            border-bottom: 1px solid #CCC;
        }
    }
}
</style>

<style lang="scss">
.ConstructionInspection {
    .van-dropdown-menu__title {
        max-width: none !important;
    }

    .van-collapse-item__title--expanded {
        background-color: #e5f1ff;

        .van-cell__title {
            color: #3f8ffc;
        }

        .van-cell__right-icon {
            color: #3f8ffc;
        }
    }

    .van-collapse-item__content {
        padding: 0;
    }

    .van-field__label {
        width: 11em;
        color: #000;
        font-weight: bold;

    }

    .van-dropdown-menu__bar {
        background-color: #eee;
    }

    .selectValue {
        border-bottom: none !important;
    }

    /*.van-field__control {*/
        /*text-align: right;*/
    /*}*/
}
</style>
